<template>
  <div class="markdown">
    <Typewriter
      :content="content"
      :typing="typing"
      is-markdown
      @start="handleStart"
      @finish="handleFinish"
      v-if="start"
    />

    <MdPreview
      v-else
      :editorId="id"
      :modelValue="content"
      :codeFoldable="false"
      previewTheme="vuepress"
      codeTheme="github"
      :codeStyle="{ whiteSpace: 'pre-wrap' }"
    />
  </div>
</template>
<script setup>
import { Typewriter } from 'vue-element-plus-x'
import 'vue-element-plus-x/styles/prism.min.css'

import '@/libs/md.js'
import { MdPreview, MdCatalog } from 'md-editor-v3'
// import 'md-editor-v3/lib/preview.css'

const emit = defineEmits(['start', 'finish'])
const start = ref(true)

const props = defineProps({
  content: String,
  typing: Object,
  restart: { type: Boolean, default: true },
})

watch(
  () => props.content,
  val => {
    if (props.restart) handleStart()
  },
)

const id = 'preview-only'

const handleStart = () => {
  start.value = true
}

const handleFinish = () => {
  start.value = false
  emit('finish')
}
</script>
<style lang="scss" scoped>
.markdown {
  // z-index: -1;
  // background: #f3f3f3;
  // border-radius: 6px;
  // display: flex;
  // padding: 12px;
}

:deep(.md-editor) {
  background: none;
}

:deep(.md-editor-code-block) {
  white-space: pre-wrap;
}

:deep(.md-editor div.vuepress-theme) {
  color: #000;
}

:deep(.markdown-body) {
  background: none;
}
</style>
